import React, { useState } from "react";
import { View, StyleSheet, Dimensions, Text, TouchableOpacity } from "react-native";
import { Shadow } from "react-native-shadow-2";
import { Icon } from "@rneui/themed";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const FrozenWallet = () => {

    const [showSelect, setShowSelect] = useState(false);
    const [freezing, setFreezing] = useState('7');

    const handlePressConfirm = () => {

    }

    const onSelect = (value) => {
        setFreezing(value)
        setShowSelect(!showSelect)
    }

    return (
        <View style={styles.container}>
            <View style={styles.bodyContent}>
                <Text style={{ ...styles.title2, marginTop: 11 * ratio }}>
                    To prevent accidents, you can choose to freeze money
                    within a specific time frame Package to ensure that transactions
                    cannot be carried out within this period of time.
                    The time range set after the wallet is frozenTransactions
                    cannot be conducted within the range. The wallet cannot be
                    unfrozen during this period of time!
                </Text>
                <View style={{ marginTop: 20 * ratio, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                    <Text style={styles.title2}>Freezing: </Text>
                    <TouchableOpacity style={styles.selectContent} onPress={() => setShowSelect(!showSelect)}>
                        <Text style={{ ...styles.title1, color: '#000000', marginLeft: 23 * ratio }}>{freezing} Days</Text>
                        <Icon type="antdesign" name={showSelect ? "down" : "right"} color='#2A2A2A' size={12}
                            style={{ marginRight: 12 * ratio }} />
                    </TouchableOpacity>
                </View>
                {showSelect && <View style={{ alignItems: 'flex-end' }}>
                    <TouchableOpacity style={styles.selectContent} onPress={() => onSelect('7')}>
                        <Text style={{ ...styles.title1, color: '#898989', marginLeft: 23 * ratio }}>7 Days</Text>
                        <Icon type="antdesign" name={showSelect ? "down" : "right"} color='#2A2A2A' size={12}
                            style={{ marginRight: 12 * ratio }} />
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.selectContent} onPress={() => onSelect('15')}>
                        <Text style={{ ...styles.title1, color: '#898989', marginLeft: 23 * ratio }}>15 Days</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.selectContent} onPress={() => onSelect('30')}>
                        <Text style={{ ...styles.title1, color: '#898989', marginLeft: 23 * ratio }}>30 Days</Text>
                    </TouchableOpacity>
                </View>}
                <TouchableOpacity style={{ marginTop: 12 * ratio }} onPress={handlePressConfirm}>
                    <Shadow offset={[3, 6]}
                        distance={0} startColor='rgba(0,0,0,0.16)' finalColor='transparent' radius={5}>
                        <View style={styles.button}>
                            <Text style={{ ...styles.title1, color: '#FF0000' }}>Confirm freezing</Text>
                        </View>
                    </Shadow>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    bodyContent: {
        width: 260 * ratio,
        height: '100%'
    },
    selectContent: {
        width: 212 * ratio,
        height: 40 * ratio,
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    title1: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#898989',
        lineHeight: 15
    },
    title2: {
        fontSize: 10,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#2A2A2A',
        lineHeight: 13
    },
    button: {
        width: 260 * ratio,
        height: 41 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center'
    }
})
export default FrozenWallet